<template>
  <div class="maxbox">
    <div id="appp">
      <vue-particles
        color="#dedede"
        :particleOpacity="0.7"
        :particlesNumber="80"
        shapeType="circle"
        :particleSize="4"
        linesColor="#dedede"
        :linesWidth="1"
        :lineLinked="true"
        :lineOpacity="0.4"
        :linesDistance="150"
        :moveSpeed="3"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="true"
        clickMode="push"
        class="beijing"
      ></vue-particles>
    </div>

    <el-form
      :model="loginForm"
      status-icon
      :rules="rules"
      ref="loginForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <h1 class="title">
        <i class="el-icon-menu"></i>
       找回密码
      </h1>

      <el-form-item label="账号" prop="username" ref="retriveForm">
        <el-input type="text" v-model="loginForm.username"></el-input>
      </el-form-item>

      <el-form-item label="密码" prop="password" v-show="isChangePwdShow">
        <el-input type="text" v-model="loginForm.password" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="确认密码" prop="password" v-show="isChangePwdShow">
        <el-input type="text" v-model="loginForm.password" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="验证码" prop="password" v-show="isChangePwdShow">
        <el-input type="text" v-model="loginForm.code" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="getCode('retriveForm')">获取验证码</el-button>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="getPwd('loginForm')">修改密码</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>


<script>
  import api from "../../../../axios/api"
  import rules from "../../../../static/js/validator/rules.js"
  import qs from 'qs'
  export default {
    name: "retrieve",
    data() {
// 包含特殊字符哦
      const checkSpecificKey = function(str) {
// 正则表达
        var specialKey =
          "[`~!#$^&*()=|{}':;',\\[\\].<>/?~！#￥……&*（）——|{}【】‘；：”“'。，、？]‘'";
        for (var i = 0; i < str.length; i++) {
          if (specialKey.indexOf(str.substr(i, 1)) != -1) {
//specialKey是否含有某一个你输入的特殊字符
            return false; //如果你输入的账号中有特殊字符 直接退出来哦
          }
        }
        return true;
      };

// 验证密码的函数
      const pass = (rule, value, callback) => {
        if (value === "") {
//为空的验证
          callback(new Error("请输入密码"));
        } else if (value.length < 3 || value.length > 6) {
//这是密码长度的验证
          callback(new Error("密码长度 3 - 6 位"));
        } else if (!checkSpecificKey(value)) {
//
          callback(new Error("密码不能包含特殊字符"));
        } else {
          if (this.loginForm.checkPass !== "") {
// 如果确认密码不为空
            this.$refs.loginForm.validateField("checkPass"); // 调用确认密码的验证（一致性验证）
          }
// 成功的回调
          callback();
        }
      };

// 确认密码的验证函数
      const checkPass = (rule, value, callback) => {
// rule是传入的验证规则 value是用户输入的值 callback是一个回调函数
        if (value === "") {
// 如果等于空
          console.log(value);
          callback(new Error("请再次输入密码11")); // 输出提示
        } else if (value !== this.loginForm.password) {
// 如果确认密码 和 密码不同
          callback(new Error("两次输入密码不一致1"));
        }
// 如果直接调用 不传入任何错误信息 就是成功 绿色的勾勾
        callback();
      };

      return {
// 登录表单的数据
        loginForm: {
          username: "",
          password: "",
          type:"",
          modelName:"",
          checked:"",
          code:"",
          pno:""
        },
        isChangePwdShow:false,
// 验证的规则（一份数据）
        rules: {
// 验证用户名
          username: [
// 非空验证
            { required: true, message: "请输入账号", trigger: "blur" },
            { min: 2, max: 5, message: "账号长度在 2 - 5 位", trigger: "blur" }
          ],
// // 验证密码
//           password: [
// // 非空验证
//             { required: true, validator: pass, trigger: "blur" }
//           ],


          /*
          验证规则字段说明：
          { required: true/false 必填, message: "错误的提示信息", trigger: "触发验证的方式" }
          { min: 最小长度, max: 最大长度, message: "错误的提示信息", trigger: "触发验证的方式" }
          { validator： 自定义验证规则函数名， trigger: 'blur'}
          */
        }
      };
    },


    methods: {
      getPwd(loginForm){
      this.updatePwd();
      },
// 点击登录按钮 触发这个函数
      getCode(formName) {
        var _this = this;
// 获取表单组件 调用验证方法
        console.log("111")
        _this.sendCodeMail();
        this.isChangePwdShow=true;

        this.$refs[formName].validate(valid => {

// 如果所有验证通过 valid就是true
//           if (valid) {
//             console.log("111")
//             //alert("前端验证通过 可以提交给后端！");
// // 后续就可以把收集的账号和密码 一起发送给后端 验证用户名和密码的正确性。
// // 收集账号和密码
//
//
// // 发送请求 把参数发给后端（把用户名和密码发给后端 验证是否正确）
// // console.log(params)
// // 直接跳转到后端主页
// // this.$router.push("/");
//             //var params = {"username":this.loginForm.username,"password":this.loginForm.password,"modelName":this.loginForm.modelName};
//             _this.sendCodeMail();
//           } else {
// // 否则就是false
//             alert("前端验证失败 不能提交给后端！");
//             return false;
//           }
        });
      },
// 点击重置按钮 触发这个函数
      resetForm(formName) {
// this.$refs.loginForm.resetFields() 获取整个表单组件 调用重置方法
        this.$refs[formName].resetFields();
      },
      sendCodeMail(){
        console.log( this.loginForm)
        console.log( qs.stringify(this.loginForm)+"------------88888-----------")
        api.setDataFromAxios("/api/parentsController/sendCodeMail/"+this.loginForm.username, null, "post")
          .then(dto => {
          });//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）
      },
      updatePwd(){
        console.log( "1111"+this.loginForm)
        api.setDataFromAxios("/api/parentsController/updateParentsByPwd/", null, "post")
      }
    },




  };
</script>
<style scoped>
  .beijing {
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  #app {
    width: 100%;
    height: 100%;
    margin: 10 auto;
    text-align: center;
  }

  .el-form {

    height: 350px;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
  }

  .el-form .el-form-item {

    margin-top: 28px;

  }

  .el-form .el-form-item .el-form-item__label {
    color: #ffffff;
  }

  .el-form .el-form-item .title {
    color: #ffffff;
    padding-left: 40px;
  }
</style>
